import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Cascader, Field } from 'react-vant'
import options from '../../hooks/options'
import {
  Form,
  Input,
  Button,
  Switch,
} from 'antd-mobile'

function Index() {
  const nav = useNavigate()
  const handleBack = () => {
    nav(-1) // 返回上一个页面
  }

  return (
      <div style={{backgroundColor:'#f2f2f2',width:'100vw',height:'100vh'}}>
      <NavBar onBack={handleBack} style={{width:'100vw',backgroundColor:'#fff'}}>收货地址-添加</NavBar>
       <Form
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Header></Form.Header>
        <Form.Item
          name='收货人： '
          label='收货人：' >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item
          name='手机号码：'
          label='手机号码：'
          
        >
          <Input onChange={console.log} placeholder='请输入手机号码' />
        </Form.Item>
        <Form.Item >
         
          <Cascader popup={{ round: true }} title='请选择所在地区' options={options}>
      {(_, selectedRows, actions) => (
        <Field
          isLink
          value={selectedRows.map(el => el.text).join(',')}
          readOnly
          label='所在地区：'
          placeholder='请选择所在地区'
          style={{fontSize:'17px'}}
          onClick={() => actions.open()}
        />
      )}
    </Cascader>
        </Form.Item>
        <Form.Item
          name='详细地址：'
          label='详细地址：' >
          <Input onChange={console.log} placeholder='请输入所在地区' />
        </Form.Item>
       
        <Form.Item
          name='delivery'
          label='设为默认'
          valuePropName="checked"
          childElementPosition='right'
        >
          <Switch />
        </Form.Item>
      </Form>
      <div style={{position:'absolute',marginTop:'740px',width:'100vw',height:'15vh',backgroundColor:'#fff'}}>
        <Button block color='primary' size='large' style={{}}> 
       保存
        </Button>
      </div>
    </div>
  )
}

export default Index
